{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}
<style type="text/css">
#container{
	width:50%;
	min-width:400px;
	margin:0 auto;
}
ul{
	margin:0;
	padding:0;
}
li{
	display:inline-block;
	margin:2px auto 0px;
	/*background-color:#F0F0F0;
	border:1px solid #E9E9E9;*/
	color:#333;
	padding:3px 3px;
	border-radius:5px;
	width:80px;
	height:80px;
	float:left;
}
a{
	text-decoration:none;
}
img{
	border:1px solid #DEE1E4;
	padding:1px;
}

img:hover{
	border-color:#60a5ff;
}
#photos{
	width:430px;
	border:1px solid #DEE1E4;
	height:270px;
	text-align:left;
}
.photo_list{
	width:430px;
}
</style>
{% endblock %}
{% block body %}
Most recent photos  (<a href="/photos" id="viewall" title="View All Photos">view all</a>)
<div id="photos">
<ul>
{%for p in photos%}
<li>
<a href="/photo/{{ p.blob_id }}">
{% if cdn_cache %}
<img src="{{ cdn_host }}/a/{{ gae_app_id }}/photo/thumbnail/{{ p.blob_id }}x75.png?url=http://{{ gae_app_id }}.appspot.com/photo/thumbnail/{{ p.blob_id }}x75.png" />
{% else %}
<img src="/photo/thumbnail/{{ p.blob_id }}x75.png" />
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
Most popular photos  (view all)
<div id="toprank" class="photo_list">
<ul>
{%for p in toprank%}
<li>
<a href="/photo/{{ p.blob_id }}">
{% if cdn_cache %}
<img src="{{ cdn_host }}/a/{{ gae_app_id }}/photo/thumbnail/{{ p.blob_id }}x75.png?url=http://{{ gae_app_id }}.appspot.com/photo/thumbnail/{{ p.blob_id }}x75.png" />
{% else %}
<img src="/photo/thumbnail/{{ p.blob_id }}x75.png" />
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
<div style="clear:both;"></div>
<!--Most unpopular photos  (view all)
<div id="lastrank" class="photo_list">
<ul>
{%for p in lastrank%}
<li>
<a href="/photo/{{ p.blob_id }}"><img src="/photo/thumbnail/{{ p.blob_id }}x75.png" /></a>
</li>
{% endfor %}
</ul>
</div>-->
{% endblock%}
